<!DOCTYPE html>
<html>
<title>HTMLSelectListElement Test: many options</title>
<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>

<style>
  #selectList0 {
    position: absolute;
    top: 0px;
    left: 0px;
  }

  #selectList0-popover {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0px 12.8px 28.8px rgba(0, 0, 0, 0.13), 0px 0px 9.2px rgba(0, 0, 0, 0.11);
    box-sizing: border-box;
    overflow: auto;
    padding: 4px;
  }
</style>

<selectlist id="selectList0">
  <div popover slot="listbox" behavior="listbox" id="selectList0-popover">
    <option>bottom left</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
    <option>two</option>
    <option>three</option>
  </div>
</selectlist>
<br>

<script>
  function clickOn(element) {
    const actions = new test_driver.Actions();
    return actions.pointerMove(0, 0, {origin: element})
      .pointerDown({button: actions.ButtonType.LEFT})
      .pointerUp({button: actions.ButtonType.LEFT})
      .send();
  }

  promise_test(async () => {
    const selectList0 = document.getElementById("selectList0");
    const selectList0Popover = document.getElementById("selectList0-popover");

    await clickOn(selectList0);
    assert_equals(Math.round(selectList0.getBoundingClientRect().bottom), Math.round(selectList0Popover.getBoundingClientRect().top));
    assert_equals(Math.round(selectList0.getBoundingClientRect().left), Math.round(selectList0Popover.getBoundingClientRect().left));
    assert_equals(window.innerHeight, Math.round(selectList0Popover.getBoundingClientRect().bottom));
  }, "The popover should be bottom left positioned");

</script>
